<!-- 任务节点的属性表单 -->
<template>
    <div class="collapse-content-box">
        <div class="option">
            <span class="title item-required"> {{ t('nodeName') }} </span>
            <div class="form-item">
                <a-input v-model:value="form.processNodeName" @change="handleFormChange" />
            </div>
        </div>
        <div class="option">
            <span class="title item-required"> {{ t('nodeTaskType') }}</span>
            <div class="form-item">
                <a-select v-model:value="form.nodeTaskType" @change="handleFormChange">
                    <a-select-option v-for="approve in nodeTaskTypeOptions" :key="approve.value" :value="approve.value">
                        {{ approve.label }}
                    </a-select-option>
                </a-select>
            </div>
        </div>

        <div v-if="form.nodeTaskType === nodeTaskTypeValue.APPROVE">
            <!-- 审批人类型 -->
            <div class="option">
                <span class="title item-required"> {{ t('approveUserType') }} </span>
                <div class="form-item">
                    <a-radio-group
                        v-model:value="form.approveUser.approveUserType"
                        @change="handleApproveUserTypeChange"
                    >
                        <a-radio
                            v-for="type in approverUserTypeOptions"
                            :key="type.key"
                            :title="type.title"
                            :value="type.key"
                        >
                            {{ type.title }}
                        </a-radio>
                    </a-radio-group>
                </div>
            </div>
            <div class="option">
                <!-- 指定成员 -->
                <span class="title item-required"> {{ t('approveUser') }} </span>
                <div class="form-item">
                    <div class="base-select-list" @click="handleSelectUserSet('approveUser')">
                        <div
                            v-for="(item, index) in formatApproverList(form.approveUser.approverList)"
                            :key="index"
                            class="select-item"
                        >
                            <a-icon class="select-icon" :class="item.class" :type="item.iconType" />
                            <span class="">{{ item.name }}</span>
                        </div>
                        <div v-if="!form.approveUser.approverList.length" class="select-empty">
                            <a-icon type="plus" />
                            <span class="msg">{{ t('setApproveUser') }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="option">
                <span class="title"> {{ t('multiPersonApproval') }}</span>
                <div class="form-item">
                    <a-select v-model:value="form.approveUser.approveType" @change="handleFormChange">
                        <a-select-option
                            v-for="approve in approveTypeOptions"
                            :key="approve.value"
                            :value="approve.value"
                        >
                            {{ approve.label }}
                        </a-select-option>
                    </a-select>
                </div>
            </div>
            <div class="option">
                <span class="title"> {{ t('ccEnable') }} </span>
                <div class="form-item">
                    <a-switch v-model:checked="form.cc.isEnable" @change="handleCCEnableChange" />
                </div>
            </div>
            <div class="option">
                <span class="title"> {{ t('cc') }} </span>
                <div class="form-item">
                    <div
                        class="base-select-list"
                        :class="{ 'is-disabled': !form.cc.isEnable }"
                        @click="handleSelectUserSet('cc')"
                    >
                        <div
                            v-for="(item, index) in formatApproverList(form.cc.approverList)"
                            :key="index"
                            class="select-item"
                        >
                            <a-icon class="select-icon" :class="item.class" :type="item.iconType" />
                            <span class="">{{ item.name }}</span>
                        </div>
                        <div v-if="!form.cc.approverList || !form.cc.approverList.length" class="select-empty">
                            <a-icon type="plus" />
                            <span class="msg">{{ t('setCc') }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 自动审批 -->
            <div class="option">
                <span class="title"> {{ t('automaticApprovalConfig') }} </span>
                <div class="form-item">
                    <a-checkbox
                        v-model:checked="form.automaticApprovalConfig.initiatorAutomaticApprovalFlag"
                        @change="handleFormChange"
                    >
                        {{ t('initiatorAutomaticApprovalFlag') }}
                    </a-checkbox>
                    <a-checkbox
                        v-model:checked="form.automaticApprovalConfig.adjacentNodeAutomaticApprovalFlag"
                        class="checkbox-style"
                        @change="handleFormChange"
                    >
                        {{ t('adjacentNodeAutomaticApprovalFlag') }}
                    </a-checkbox>
                </div>
            </div>
            <!-- 审批人为空 -->
            <div class="option">
                <span class="title item-required">
                    {{ t('unapprovedUserProcessMethod') }}
                </span>
                <div class="form-item">
                    <a-radio-group
                        v-model:value="form.unapprovedUserProcessMethod"
                        class="approver-method"
                        @change="handleFormChange"
                    >
                        <a-radio
                            v-for="type in unapprovedUserProcessMethodOptions"
                            :key="type.key"
                            :title="type.title"
                            :value="type.key"
                        >
                            {{ type.title }}
                        </a-radio>
                    </a-radio-group>
                </div>
            </div>
        </div>
        <div v-if="form.nodeTaskType === nodeTaskTypeValue.SUBMIT">
            <div class="option">
                <span class="title item-required"> {{ t('responsiblePerson') }} </span>
                <div class="form-item">
                    <div class="base-select-list" @click="handleSelectUserSet('responsiblePerson')">
                        <div
                            v-for="(item, index) in formatApproverList(form.responsiblePerson.approverList)"
                            :key="index"
                            class="select-item"
                        >
                            <a-icon class="select-icon" :class="item.class" :type="item.iconType" />
                            <span class="">{{ item.name }}</span>
                        </div>
                        <div v-if="!form.responsiblePerson.approverList.length" class="select-empty">
                            <a-icon type="plus" />
                            <span class="msg">{{ t('setResponsiblePerson') }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="option">
                <span class="title"> {{ t('canBack') }} </span>
                <div class="form-item">
                    <a-switch v-model:checked="form.rollbackNodeFlag" @change="handleFormChange" />
                </div>
            </div>
        </div>
        <!-- TODO 用户集选择组件，老版本中的approvalIdModal组件，后续任务加 -->
        <approval-id-modal
            v-if="approvalModalVisible"
            :approver-type="form.approveUser.approveUserType"
            :fetch-response="fetchResponse"
            :approver-list="currentApprovalList"
            @afterClose="handleUpdateApprovalList"
        />
    </div>
</template>

<script lang="ts">
    import { useI18n } from 'vue-i18n'
    import { defineComponent, ref, watch } from 'vue'
    import { cloneDeep } from 'lodash-es'
    import { taskNodeAttributeForm } from '../../../types/processNodeForm'
    import { nodeTaskTypeValue } from '@/enums/constant'
    import ApprovalIdModal from './approvalIdModal.vue'
    export default defineComponent({
        components: {
            ApprovalIdModal
        },
        props: {
            processNodeForm: {
                type: Object,
                default: () => ({})
            },
            fetchResponse: {
                type: Object,
                default: () => ({})
            }
        },
        emits: ['change'],
        setup(props, { emit }) {
            const { t } = useI18n()
            // 节点类型选项
            const nodeTaskTypeOptions = [
                { label: t('nodeTaskTypeOption.approve'), value: nodeTaskTypeValue.APPROVE },
                { label: t('nodeTaskTypeOption.submit'), value: nodeTaskTypeValue.SUBMIT }
            ]
            // 审批人类型选项
            const approverUserTypeOptions = [
                { key: 'DESIGNATED_MEMBER', title: t('approverUserTypeOption.DESIGNATED_MEMBER') },
                { key: 'DESIGNATED_ROLE', title: t('approverUserTypeOption.DESIGNATED_ROLE') }
            ]
            // 审批类型选项
            const approveTypeOptions = [
                { label: t('approveTypeOption.jointlySign'), value: 'JOINTLY' },
                { label: t('approveTypeOption.orSign'), value: 'OR' }
            ]
            // 审批人为空时的处理方式选项
            const unapprovedUserProcessMethodOptions = [
                {
                    key: 'AUTOMATIC_SKIP_NODE',
                    title: t('unapprovedUserProcessMethodOption.AUTOMATIC_SKIP_NODE')
                },
                { key: 'END_PROCESS', title: t('unapprovedUserProcessMethodOption.END_PROCESS') }
            ]
            const form = ref<taskNodeAttributeForm>()
            // 当前操作的用户集的类型
            const currentApprovalType = ref<string>()
            // 当前操作的用户集数据
            const currentApprovalList = ref<[]>()
            // 是否显示选择用户集的弹窗
            const approvalModalVisible = ref<boolean>(false)
            // 从processNodeForm属性中，获取当前组件需要的表单数据，构造一个新的表单
            function initForm() {
                // 构造任务节点属性表单的逻辑
                const {
                    processNodeName,
                    nodeTaskType,
                    approveUser,
                    cc,
                    automaticApprovalConfig,
                    unapprovedUserProcessMethod,
                    responsiblePerson,
                    rollbackNodeFlag
                } = cloneDeep(props.processNodeForm || {})
                // 是否开启抄送：如果存在抄送人，则开启抄送；否则使用组件内部状态
                // cc.isEnable = Boolean(cc.approverList.length || form.value?.cc.isEnable)
                form.value = {
                    processNodeName,
                    nodeTaskType,
                    approveUser,
                    cc,
                    automaticApprovalConfig,
                    unapprovedUserProcessMethod,
                    responsiblePerson,
                    rollbackNodeFlag
                }
            }
            watch(
                () => props.processNodeForm,
                () => {
                    // processNodeForm发生变化时，重新初始化一下任务节点属性表单
                    initForm()
                },
                {
                    deep: true,
                    immediate: true
                }
            )

            // 选择用户集合
            function handleSelectUserSet(type) {
                if (!form.value) {
                    return
                }
                // 如果没有启用抄送人 就不处理
                if (type === 'cc' && !form.value.cc.isEnable) {
                    return
                }
                currentApprovalType.value = type
                currentApprovalList.value = form.value[type] ? form.value[type].approverList || [] : []
                approvalModalVisible.value = true
            }

            // 更新用户集
            function handleUpdateApprovalList(approverList) {
                if (form.value) {
                    form.value[currentApprovalType.value as string].approverList = approverList
                }
                approvalModalVisible.value = false
                handleFormChange()
            }

            // 审批人类型切换时，清空审批人数据
            function handleApproveUserTypeChange() {
                if (form.value) {
                    form.value.approveUser.approverList = []
                }
                handleFormChange()
            }

            // 处理是否启用抄送状态的变化
            function handleCCEnableChange() {
                // 如果禁用抄送，则清空抄送人信息
                if (form.value && !form.value.cc.isEnable) {
                    form.value.cc.approverList = []
                    form.value.cc.idList = []
                    form.value.cc.departmentIdList = []
                    form.value.cc.userGroupIdList = []
                }
                handleFormChange()
            }

            // 表单数据发生变化，向组件外抛出change事件
            function handleFormChange() {
                emit('change', cloneDeep(form.value))
            }

            /**
             * 格式化数据方便telemape展示数据
             */
            function formatApproverList(approverList = []) {
                return cloneDeep(approverList).map((item: any) => {
                    switch (item.type) {
                        case 'USER':
                            item.class = 'select-icon-user'
                            item.iconType = 'user'
                            break
                        case 'USER_GROUP':
                            item.class = 'select-icon-users'
                            item.iconType = 'team'
                            break
                        case 'DEPARTMENT':
                            item.class = 'select-icon-apartment'
                            item.iconType = 'apartment'
                            break
                    }
                    return item
                })
            }

            return {
                // 组件属性
                form,
                nodeTaskTypeValue,
                nodeTaskTypeOptions,
                approverUserTypeOptions,
                approveTypeOptions,
                approvalModalVisible,
                currentApprovalList,
                unapprovedUserProcessMethodOptions,

                // 组件方法
                t,
                handleFormChange,
                handleApproveUserTypeChange,
                handleSelectUserSet,
                handleCCEnableChange,
                formatApproverList,
                handleUpdateApprovalList
            }
        }
    })
</script>

<i18n>
zh-CN:
  nodeName: '节点名称'
  nodeTaskType: '节点类型'
  approveUserType: '审批人类型'
  approveUser: '审批人'
  setApproveUser: '点击设置审批人'
  multiPersonApproval: '多人审批'
  ccEnable: '启用抄送'
  cc: '抄送人'
  setCc: '点击设置抄送人'
  automaticApprovalConfig: '自动审批'
  initiatorAutomaticApprovalFlag: '发起人自动审批(当前节点人员为发起人时,自动审批)'
  adjacentNodeAutomaticApprovalFlag: '相邻节点自动审批(当前节点人员为上一节点人员时,自动审批)'
  unapprovedUserProcessMethod: '审批人为空时'
  responsiblePerson: '负责人'
  setResponsiblePerson: '点击设置负责人'
  canBack: '是否可作为回退节点'
  nodeTaskTypeOption:
    approve: '审批节点'
    submit: '填报节点'
  approverUserTypeOption:
    DESIGNATED_MEMBER: '指定成员'
    DESIGNATED_ROLE: '指定角色'
  approveTypeOption:
    jointlySign: '会签'
    orSign: '或签'
  unapprovedUserProcessMethodOption:
    AUTOMATIC_SKIP_NODE: '自动跳过节点'
    END_PROCESS: '流程结束'
</i18n>
